<template>
	<view class="box-sizing-b w-full">
		<!-- 1 搜索 -->
		<!-- 2 轮播 -->
		<view v-if="swiperDatas && swiperDatas.length > 0" class="swiper-area margin-lr-sm border-radius pos-r">
			<swiper class="swiper w-full" :autoplay="autoplay" indicator-dots indicator-color="#f7f7f7" indicator-active-color="#ff6a6c"
				previous-margin="30px" next-margin="30px" 
				circular 
				:current="swiperIdx"
				@change="swiperChange">
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx" class="swiper-item wh-full box-sizing-b">
					<view class="wh-full animated-all" :style="{ 'transform': `scale(${swiperIdx == idx ? 1 : 0.93})` }" @click.stop="topage(item)">
						<image class="border-radius wh-full" mode="aspectFill" lazy-load :src="item.img" />
					</view>
					<!-- 添加调试信息 -->
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance } from 'vue'
	const swiperIdx = ref(0)
	const autoplay = ref(true)
	const swiperDatas = ref([])
	
	const { proxy } = getCurrentInstance()

	const loadData = () => {
		proxy.$func.usemall.call('app/mp/home', {
		  rows: 8
		}).then(res => {
		  if (res.code === 200) {
				uni.setStorage({ key: '__use_home', data: res.datas })
				swiperDatas.value = res.datas.carousel || []
		  }
		})
	}
	// 轮播切换
	const swiperChange = (res) => {
		if (res.detail) {
			swiperIdx.value = res.detail.current;
		}
	}
	// 实现跳转逻辑
	const topage = (item) => {
		if (item && item.type == '网页') {
			uni.navigateTo({
				url: `/pages/content/web?url=${item.url}`
			})
		} else if (item && item.type == '页面') {
			if (item.url.includes('/tabbar/')) {
				uni.switchTab({
					url: item.url
				})
				return
			}
			
			uni.navigateTo({
				url: `${item.url}`
			})
		} else {
			if (item.id) {
				uni.setStorage({
					key: '__goods_data',
					data: item
				});
				proxy.$api.togoods({
					id: item._id
				})
			}
		}
	}
	
	onMounted(() => {
	  loadData()
	})
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
</style>
